import React from 'react'
import { NavBar, TabBar } from 'antd-mobile'
import {
    AppOutline,
    MessageOutline, 
    UserOutline,
} from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
function index() {
    const tabs = [
        {
            key: '/',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/msg',
            title: '消息',
            icon: <MessageOutline />,
        },
        {
            key: '/my',
            title: '我的',
            icon: <UserOutline />,
        },
    ]
    const nav=useNavigate()
    return (
        <div >
            <TabBar  onChange={value => nav(value)}>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} to={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
             {/* <TabBar  onChange={value => nav(value)}> 
                <TabBar.Item key={'/'} title={'首页'} to={'/'}/> 
                <TabBar.Item key={'/msg'} title={'消息'} to={'/msg'}/> 
                <TabBar.Item key={'/my'} title={'我的'} to={'/my'}/> 
            </TabBar> */}
        </div>
    )
}

export default index